<template>
  <div class="bg">
    <div class="con" v-show="screenWidth >= 700">
      <div style="width: 270px;"></div>
      <div class="left">
        <div class="left_">
          <div class="c1e f24 f-w d-f"><img draggable="false" src="http://test.bjclb.cn/uploads/assets/logo.png" alt="" /> AI智能课件</div>
          <div @click="index = 0" class="tab" :class="[
            index == 0 ? 'tabs' : '',
          ]">
            <img draggable="false" src="http://test.bjclb.cn/uploads/assets/icon1.png" alt="">
            <div>
              <div class="c00 f14">主题PPT创建</div>
              <div class="c99 f12">主题、长文本一键生成PPT文档</div>
            </div>
          </div>
          <div @click="index = 1" class="tab" :class="[
            index == 1 ? 'tabs' : '',
          ]">
            <img draggable="false" src="http://test.bjclb.cn/uploads/assets/icon2.png" alt="">
            <div>
              <div class="c00 f14">全部文档</div>
              <div class="c99 f12">生成后的PPT文档，可进行查看和下载</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img v-show="screenWidth >= 700" draggable="false" class="bg_" src="http://test.bjclb.cn/uploads/assets/bg.png" alt="">
    <img v-show="screenWidth < 700" draggable="false" class="bg_" src="http://test.bjclb.cn/uploads/assets/ydbg.png" alt="">
    <content @wholess="wholes" v-if="index == 0"></content>
    <document @establishs="establishs_" v-if="index == 1 && screenWidth >= 700"></document>
  </div>
  <div>
    <phonelist v-if="index == 1 && screenWidth < 700"></phonelist>
    <van-tabbar v-model="index" @change="onChange" v-show="screenWidth < 700">
      <van-tabbar-item replace>
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace>
        <span>文档</span>
        <template #icon="props">
          <img :src="props.active ? icontab2.active : icontab2.inactive" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item replace  to="/ai">
        <span>对话</span>
        <template #icon="props">
          <img :src="props.active ? icontab3.active : icontab3.inactive" />
        </template>
      </van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script lang="ts" setup>
import content from "./content.vue";
import phonelist from "./phonelist.vue";
import document from "./document.vue";
import { ref, onMounted, onUnmounted } from "vue";
import router from "@/router";
import { make,login } from "@/axios/index";

const wholes = (val) => {
  index.value = 1
};
const establishs_ = () => {
  index.value = 0
};
const warehouseSelects = async () => {
  let { data } = await make({
    query: '鲁迅文学',
  });
  if (data.code == 0) {
    console.log(data.data, "仓库列表");
  } else {
  }
};
const logins = async () => {
  let { data } = await login({});
};
onMounted(() => {
  // logins();  
});
const index = ref<number>(0);
const onChange = async (val) => {
  index.value = val
};
const icon = {
  active: require("/src/assets/tab3.png"),
  inactive: require("/src/assets/tab3_.png"),
};
const icontab2 = {
  active: require("/src/assets/tab1.png"),
  inactive: require("/src/assets/tab1_.png"),
};
// const icontab3 = {
//   active: require("/src/assets/tab2.png"),
//   inactive: require("/src/assets/tab2_.png"),
// };
const screenWidth = ref(window.innerWidth);

const handleResize = () => {
  screenWidth.value = window.innerWidth;
};

onMounted(() => {
  if (router.currentRoute.value.query.index != undefined) {
    console.log(router.currentRoute.value.query.index);
    index.value =Number(router.currentRoute.value.query.index) 
  }
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

</script>

<style lang="scss" scoped>
.con {
  width: 270px;
  z-index: 1;
}

.left {
  position: fixed;
  left: 0;
  top: 0;
  width: 270px;
  height: 100%;
  background-color: #DAEBFF;

  .left_ {
    margin: 19px 12px;

    .c1e {
      margin-left: 9px;

      img {
        margin-right: 8px;
      }
    }

    .tabs {
      background-color: #fff;
    }

    .tab {
      border-radius: 4px;
      padding: 15px 9px;
      display: flex;
      margin-top: 29px;
      cursor: pointer;

      img {
        width: 16px;
        height: 16px;
        margin-right: 7px;
      }

      .c00 {
        margin-bottom: 5px;
      }
    }
  }
}

.bg {
  display: flex;
}

.bg_ {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}
</style>